<template>
    <!-- 2. 满足静态结构 -->
    <div class="swiper-container" :id="id">
        <div class="swiper-wrapper" >
            <!-- <div class="swiper-slide">
                这里面的内容 不确定  轮播图片  轮播文字 
            </div> -->
            <slot></slot>
        </div>
    </div>
</template>

<script>
// 1. 下载引入 
import Swiper from 'swiper'

export default {
    name:"mySwipe",
    props:{
        // 轮播图实例化需要的参数 
        id:{
            type:String,
            default:"bannerOne"
        },
        options:{
            type:Object,
            default:{

            }
        }
    },
    mounted(){
        // 3. Swiper 插件实例化 
        const sw = new Swiper("#"+this.id,{   // 轮播图的参数 
            ...this.options,
            observer:true
        })

        console.log("child - mounted")
    }
}
</script>

<style lang="scss" scoped>

</style>